<template>
  <public-dialog
      :title="title"
      width="60%"
      :footerButton="false"
      v-model:visible="dialogVisible"
  >
      <template #default>
<!--          <el-steps :active="active" finish-status="success" align-center>
              <el-step title="项目基本信息" />
              <el-step title="项目阶段" />
              <el-step title="投资方案" />
              <el-step title="完成" />
          </el-steps>
          <component
              :is="whichComponent"
              ref="stepComponent"
              :currentProp="currentProp"
              @nextStep="changeComponent"
          ></component>-->

          <investment-plan
               ref="investmentPlanRef"
              @nextStep="changeComponent"
          />
      </template>
  </public-dialog>
</template>

<script setup>
import PublicDialog from "@/components/PublicDialog.vue";
import {reactive, ref, shallowRef, watch,nextTick} from "vue";
import {
    ElSteps,
    ElStep,
} from "element-plus";
import ProjectInfo from "@/views/investmentProjectManagement/preparatoryProject/reserveInvestmentProjectLibrary/components/projectInfo.vue"
import ProjectStageTree from "@/views/investmentProjectManagement/preparatoryProject/reserveInvestmentProjectLibrary/components/projectStageTree";
import InvestmentPlan from "@/views/investmentProjectManagement/preparatoryProject/reserveInvestmentProjectLibrary/components/investmentPlan";
import SuccessPage from "@/views/investmentProjectManagement/preparatoryProject/reserveInvestmentProjectLibrary/components/successPage";

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    title:{
        type:String,
        default:'新增'
    }
});

const emits = defineEmits(["update:visible",'onSuccess']);
const dialogVisible = ref(props.visible);

const state = reactive({
    projectId:'',
    programmeInfo:null,
    departmentPersonList:[],
    form:{}
});

const currentProp = reactive({
    projectId:'',
    projectTypeId:'',
});

// 监听visible的变化 只能监听第一次的变化
watch(
    () => props.visible,
    (value) => {
        dialogVisible.value = value;
    }
);

// 监听组件内部的dialogVisible变化
watch(
    () => dialogVisible.value,
    (value) => {
        emits("update:visible", value);
    }
);

/**
 * 组件切换
 * @param val
 */
const active = ref(0);
// const whichComponent = shallowRef(ProjectInfo);
const whichComponent = shallowRef(InvestmentPlan);
/*const changeComponent = (val,data) => {
    if(val === 'goProjectStageTree'){
        whichComponent.value = ProjectStageTree;
        currentProp.projectId = data.projectId;
        currentProp.projectTypeId = data.projectTypeId;
        active.value = 1;
        return;
    }
    if(val === 'goInvestmentPlan'){
        whichComponent.value = InvestmentPlan;
        active.value = 2;
        return;
    }
    if(val === 'goSuccessPage'){
        whichComponent.value = SuccessPage;
        active.value = 4;
        return;
    }
    if(val === 'successPage'){
        dialogVisible.value = false;
        emits('onSuccess');
    }
};*/

const changeComponent = (val,data) => {
    dialogVisible.value = false;
};

/**
 * 重置
 */
const stepComponent = ref(null);
const reset = (type='add') => {
    active.value = 0;
    whichComponent.value = ProjectInfo;
    nextTick(()=>{
        stepComponent.value.resetFields();
    });
    if(type==='add'){
        // resetForm(form);
    }
    if(type==='edit'){

    }
}

/**
 * 查看方案状态
 * @param planId
 */
const investmentPlanRef = ref(null);
const getStatus = (projectId) => {
    nextTick(()=>{
        investmentPlanRef.value.getStatus(projectId);
    });
}

defineExpose({reset,getStatus});
</script>